<template>
  <div class="login">
    <el-tabs v-model="activeName">
      <el-tab-pane label="登录" name="login">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="姓名" prop="account">
            <el-input v-model="ruleForm.account"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')" style="margin-right: 20px">登录</el-button>
            <!-- <a type="primary" @click="register('register')">注册</a> -->
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="注册" name="register">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="ruleForm.phone">
              <el-button slot="append" @click="sentMsg">{{btnTxt}}{{btnTxt !== '发送验证码' ? 's' : ''}}</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="verifyCode">
            <el-input v-model="ruleForm.verifyCode"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="registerForm('ruleForm')" style="margin-right: 20px">注册</el-button>
            <!-- <a type="primary" @click="register('login')">登录</a> -->
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    
    
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeName: 'login',
      btnTxt: '发送验证码',
      type: 'login',
      name: 'login',
      ruleForm: {
        // account: '13438302385',
        // password: '123456',
        // phone: '13438302385',
        // verifyCode:'867856',
        account: 'admin',
        password: 'admin',
        phone: '',
        verifyCode:''
      },
      rules: {
        account: [
          { required: true, message: '请输入姓名', trigger: 'change' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' },
          { min: 4, max: 18, message: '长度在 6 到 18 个字符', trigger: 'change' }
        ],
        verifyCode: [
          { required: true, message: '请输入验证码', trigger: 'change' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'change' },
          { pattern: /^1(3[0-9]|[01456879]|5[0-3,5-9]|6[2567]|7[0-8]|8[0-9]|9[0-3,5-9])\d{8}$/, message: '请输入正确的手机号' }
        ]
      }
    }
  },
  mounted(){
    let accessToken = window.localStorage.getItem('accessToken')
    if(accessToken) this.$router.push('/list')
  },
  watch:{
    activeName(val){
      if(val === 'login'){
        this.$refs.ruleForm.clearValidate()
      }else{
        this.$refs.ruleForm2.clearValidate()
      }
    }
  },
  methods: {
    register(type){
      this.type = type
      if(type === 'login'){
        this.$refs.ruleForm2.clearValidate()
      }else{
        this.$refs.ruleForm.clearValidate()
      }
    },
    submitForm () {
      this.$refs.ruleForm.validate((valid) => {
        let {account,password} = this.ruleForm
        if (valid) {
          this.$http.post(`/blade-auth/token?account=${account}&password=${password}`).then(res => {
            let {success,data,userId,msg} = res || {}
            if(success){
              let {accessToken,userName} = data || {}
              window.localStorage.setItem('accessToken',accessToken)
              window.localStorage.setItem('userName',userName)
              window.localStorage.setItem('userId',userId)
              this.$router.push('/list')
            }else{
              this.$message.error(msg)
            }
          }).catch((e) => {
            this.$message.error(e.data.msg)
          })
        }
      })
    },
    registerForm(){
      this.$refs.ruleForm2.validate((valid) => {
        let {phone,verifyCode,password} = this.ruleForm
        if (valid) {
          let data = {
            account:phone,
            verifyCode,password,tenantId: '000000'
          }
          this.$http.post(`/blade-user/registerGeneralUser`,data).then(res => {
            let {success,data,userId,msg} = res || {}
            if(success){
              let {accessToken,userName} = data || {}
              window.localStorage.setItem('accessToken',accessToken)
              window.localStorage.setItem('userName',userName)
              window.localStorage.setItem('userId',userId)
              this.$router.push('/list')
            }else{
              this.$message.error(msg)
            }
          }).catch(e => {
            // console.log(e)
            this.$message.error(e.data.msg)
          })
        }
      })
    },
    resetForm () {
      this.$refs.ruleForm.resetFields()
    },
    sentMsg(){
      if(this.btnTxt === '发送验证码'){
        this.$refs.ruleForm2.validateField('phone', (valid) => {
          if(!valid){
            let {phone} = this.ruleForm
            this.$http.get(`/blade-user/sendVerifyCode?phone=${phone}`).then(res => {
              let {success,msg} = res
              if(success){
                this.btnTxt = 60
                let count = setInterval(() => {
                  if(this.btnTxt <= 0){
                    this.btnTxt = '发送验证码'
                    clearInterval(count)
                  }else{
                    this.btnTxt = this.btnTxt - 1
                  }
                }, 1000);
              }else{
                this.$message.error(msg)
              }
            }).catch((e) => {
              this.$message.error(e.data.msg)
            })
          }
        })
      }else{
        this.$message('不能频繁发送验证码')
      }
    }
  }
}
</script>

<style scoped>
  .login{
    position: fixed;
    width: 500px;
    min-height: 260px;
    left: 50%;
    top: 50%;
    margin-top: -240px;
    margin-left: -250px;
    box-shadow: 1px 1px 0px 3px rgba(0,0,0,.1);
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 20px 40px;
    box-sizing: border-box;
  }
</style>
